import {useState,useEffect} from "react";
import {useNavigate,useLocation} from "react-router-dom"
import { navColumn } from "./column";
import {Input,Button,Table} from "antd"
import {SearchOutlined,RedoOutlined} from "@ant-design/icons"
import siteClass from "./dict.module.scss";
import {queryNavType} from "@/api/index.js"
export default function SiteClass() {
  const [paginationObj, setPaginationObj] = useState({ page: 1, size: 10 });
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [name,setName] = useState("");
  const nav = useNavigate();
  const location = useLocation();

  useEffect(()=>{
    getList();
  },[])

  const getList = async (requestObj = {}) => {
    setLoading(true);
    const res = await queryNavType(requestObj);
    console.log("navtype", res);
    setList(res.data);
    setLoading(false)
  };

  const handleName = (e)=>{
    setName(e.target.value);
  }

  const handleSearch = ()=>{
    let requestObj = {};
    if(name) {
      requestObj.name = name;
    }
    getList(requestObj);
    handleResetSearch();
  }

  const handleResetSearch = ()=>{
      setName("");
  }

  const handlePageChange = (page, size) => {
    // getList({ page, size });
  };

  const handleSizeChange = (page, size) => {
    // getList({ page, size });
  };

  const handleToData = (id)=>{
    console.log("跳转id", id, location);
    nav(`/site/navData?typeId=${id}`, {
      state: { originPath: location.pathname },
    });
  }

  const columns = navColumn({handleToData});

  return (
    <div className={siteClass.dict}>
      <div className={siteClass.top}>
        <div className={siteClass.search}>
          <h3>分类名称:</h3>
          <Input
            placeholder="请输入分类名称"
            value={name}
            onChange={handleName}
            style={{ width: "200px", marginRight: "10px" }}
          />
          <Button
            icon={<SearchOutlined />}
            type="primary"
            className={siteClass["ant-btn"]}
            onClick={handleSearch}
          >
            查找
          </Button>
          <Button
            icon={<RedoOutlined />}
            className={siteClass["ant-btn"]}
            onClick={handleResetSearch}
          >
            重置
          </Button>
        </div>
      </div>
      <div className={siteClass["table-container"]}>
        <Table
          columns={columns}
          dataSource={list}
          rowKey={(record) => record.id}
          loading={loading}
          pagination={{
            pageSize: paginationObj.pageSize,
            current: paginationObj.currentPage,
            pageSizeOptions: [3, 5, 10, 20],
            showSizeChanger: true,
            total: paginationObj.total,
            showTotal: (total) => `共${total}条`,
            onChange: handlePageChange,
            onShowSizeChange: handleSizeChange,
          }}
        />
      </div>
    </div>
  );
}
